<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 班级数量</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .button {
            display: inline-block;
            padding: 15px 25px;
            font-size: 5px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            outline: none;
            color: #fff;
            background-color: #4CAF50;
            border: none;
            border-radius: 15px;
            box-shadow: 0 9px #999;
        }

        .button:hover {background-color: #3e8e41}

        .button:active {
            background-color: #3e8e41;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }
    </style>
</head>
<body>
<script type="text/javascript">
</script>
<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
    <thead>
    <tr class="active">
        <th>班级id</th>
        <th>班级名</th>
        <th>总人数</th>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr id="1">
        <td>1</td>
        <td>计算机基础</td>
        <td>5</td>
        <td><input type="button" value="查看" class="button"></td>
    </tr>
    <tr id="2">
        <td>2</td>
        <td>软件工程</td>
        <td>3</td>
        <td><input type="button" value="查看" class="button"></td>
    </tr>
    <tr >
        <td>3</td>
        <td>高等数学</td>
        <td>2</td><td>
        <input type="button" value="查看" class="button"></td>
    </tr>
    </tbody>
</table>

</body>
</html>